<!-- src/pages/PaymentFail.vue -->
<template>
  <div class="payment-fail">
    <!-- 顶部图标 -->
    <div class="fail-icon">
      <!-- <image src="/static/imgs/payment-fail.png" mode="aspectFit" /> -->
    </div>

    <!-- 状态信息 -->
    <div class="fail-info">
      <div class="title">支付失败</div>
      <div class="desc">{{ failReason || '订单支付失败，请重新支付' }}</div>
    </div>

    <!-- 订单信息 -->
    <div class="order-info">
      <div class="info-item">
        <div class="label">订单金额</div>
        <div class="value">￥{{ orderAmount }}</div>
      </div>
      <div class="info-item">
        <div class="label">订单编号</div>
        <div class="value text-ellipsis" style="width: 70%;text-align: right;">{{ orderNo }}</div>
      </div>
    </div>

    <!-- 按钮区域 -->
    <div class="button-group">
      <div class="btn primary-btn" @click="retryPayment">重新支付</div>
      <div class="btn secondary-btn" @click="goToOrderDetail">查看订单</div>
      <div class="btn secondary-btn" @click="goToHome">返回首页</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useLoginStore } from '@/stores/login.js'
const loginStore = useLoginStore()

// 页面参数
const orderAmount = ref('')
const orderNo = ref('')
const failReason = ref('')

// 页面加载
onLoad((options) => {
  if (options) {
    orderAmount.value = options.amount || '0.00'
    orderNo.value = options.orderNo || ''
    failReason.value = options.reason || ''
  }
})

// 重新支付
const retryPayment = async () => {
  const orderId = orderNo.value
  const openid = loginStore.openId
  // 支付订单创建
  const PaymentObj = await Fetch('shopping/pays/wechatJsapi', {
    method: 'get',
    data: {
      orderId,
      openid,
    }
  })
  const payData = PaymentObj.data.value
  // 3. 调起微信支付
  wx.requestPayment({
    timeStamp: payData.timeStamp,
    nonceStr: payData.nonceStr,
    package: payData.package,
    signType: payData.signType,
    paySign: payData.paySign,
    success() {
      uni.showToast({
        title: '支付成功',
        icon: 'success'
      })

      // 清空购物车数据
      uni.removeStorageSync('cartData')

      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/OrderDetails?id=' + orderId
        })
      }, 1000)
    },
    fail(err) {
      uni.showToast({
        title: '支付失败',
        icon: 'none',
      })
    },
  });
}

// 查看订单详情
const goToOrderDetail = () => {
  uni.navigateTo({
    url: `/pages/OrderDetails?id=${orderNo.value}&from=payment&openid=${loginStore.openId}&orderId=${orderNo.value}`
  })
}

// 返回首页
const goToHome = () => {
  uni.reLaunch({
    url: '/pages/index'
  })
}
</script>

<style lang="scss" scoped>
.payment-fail {
  min-height: 100vh;
  background: #FFFFFF;
  padding: 60rpx 30rpx;
  box-sizing: border-box;

  .fail-icon {
    text-align: center;
    margin-bottom: 40rpx;

    image {
      width: 200rpx;
      height: 200rpx;
    }
  }

  .fail-info {
    text-align: center;
    margin-bottom: 60rpx;

    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 16rpx;
    }

    .desc {
      font-size: 28rpx;
      color: #999999;
    }
  }

  .order-info {
    background: #F8F8F8;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 80rpx;

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        font-size: 28rpx;
        color: #666666;
      }

      .value {
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
      }
    }
  }

  .button-group {
    .btn {
      width: 100%;
      height: 88rpx;
      border-radius: 44rpx;
      font-size: 32rpx;
      line-height: 88rpx;
      text-align: center;
      margin-bottom: 30rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .primary-btn {
      background: #FBE050;
      color: #333333;
    }

    .secondary-btn {
      background: #FFFFFF;
      border: 2rpx solid #DDDDDD;
      color: #666666;
    }
  }

  .text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
